<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大图无限滚动</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 250px;
				height: 375px;
				margin: 200px auto;
				position: relative;
				overflow: hidden;
			}
			#content{
				width: 1750px;
				height: 375px;
				position: absolute;
				left: 0;
				top: 0;
			}
			img{
				width: 250px;
				height: 375px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="content">
				<img src="../JS/Day08/img/1.png" alt="" />
				<img src="../JS/Day08/img/2.jpeg" alt="" />
				<img src="../JS/Day08/img/3.jpeg" alt="" />
				<img src="../JS/Day08/img/4.png" alt="" />
				<img src="../JS/Day08/img/5.jpeg" alt="" />
				<img src="../JS/Day08/img/6.png" alt="" />
				<img src="../JS/Day08/img/1.png" alt="" />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		
		var con = document.getElementById("content");
		var x = 0;
		setInterval(function(){
			x--;
			con.style.left = x+"px";
			if (x==-1500) {
				x=0;
			}
		},10)
		
		
		
	</script>
</html>
